<!-- 角色列表 -->
<template>
  <div class="box">
      <!-- 面包屑 -->
     <el-breadcrumb separator="/" class="header">
        <el-breadcrumb-item >首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色列表</el-breadcrumb-item>
     </el-breadcrumb>

     <!-- 卡片视图 -->
      <el-card >
         <el-button type="primary" @click="add">添加角色</el-button>
         <el-table
            height="450"
            border
            :data="tableData"
            style="width: 100%">
            <el-table-column type="expand">
              <!-- 展开项 -->
            <template slot-scope="tableData"> 
                      <el-row v-for="item in tableData.row.children" :key="item.id" class="rowborder">
                          <!-- 一级 -->
                           <el-col :span="6" ><el-tag  closable  @close="deletepower(item.id,tableData.row)"> {{item.authName}}</el-tag><i class="el-icon-caret-right"></i></el-col> 
                           <!-- 二级 -->
                          <el-col :span="18"  >
                               <el-row v-for="item1 in item.children" :key="item1.id"> 
                                   <el-col :span="8" > <el-tag type= 'warning' @close="deletepower(item1.id,tableData.row)"  closable>{{item1.authName}}</el-tag><i class="el-icon-caret-right"></i></el-col> 
                                    <!--三级 -->
                                     <el-col :span="16" >
                                     <el-col  v-for="item2 in item1.children" :key="item2.id" :span="6"><el-tag type="danger"  closable  @close="deletepower(item2.id,tableData.row)">{{item2.authName}}</el-tag></el-col>
                                    </el-col> 
                               </el-row>
                       </el-col> 
                      </el-row>
        </template> 
        </el-table-column>
        <el-table-column
            label="#"
            prop="id">
            </el-table-column>
            <el-table-column
            label="角色名称"
            prop="roleName">
            </el-table-column>
            <el-table-column
            label="角色描述"
            prop="roleDesc">
            </el-table-column>
        
           <el-table-column
             prop="id"
             label="操作">
                <template v-slot="tableData" >
                    <el-button type="primary" @click="editclick(tableData.row.id)">编辑</el-button>
                    <el-button type="success" @click.prevent="allotclick(tableData.row)">分配权限</el-button>
                    <el-button type="danger"  @click="deleterole(tableData.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
      </el-card>

      
    <!-- 添加角色的弹框 -->
    <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="50%"
    :before-close="handleClose">
    <el-form ref="form" :model="roleform" label-width="80px">
        <el-form-item label="角色名称" prop="roleName"
         :rules="[
              { required: true, message: '角色名称不能为空'},
            ]"
        >
            <el-input v-model="roleform.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc"
         :rules="[
              { required: true, message: '角色描述不能为空'},
            ]">
            <el-input v-model="roleform.roleDesc"></el-input>
        </el-form-item>
    </el-form>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
    </el-dialog>

  <!-- 分配角色权限的弹框 -->
    <el-dialog
    title="分配角色权限"
    :visible.sync="roledialogVisible"
    width="50%"
    :before-close="handleClose">
      <el-tree
      :data="treelist"
      show-checkbox
      node-key="id"
      default-expand-all
      :default-checked-keys="arrcheck"
      :props="defaultProps"
      ref="tree"
     >
    </el-tree>
        <el-button @click="roledialogVisible = false ,data.length=0">取 消</el-button>
        <el-button type="primary" @click="submitForm2">确 定</el-button>
    </el-dialog>

   <!-- 编辑角色的弹框 -->
    <el-dialog
    title="编剧角色"
    :visible.sync="dialogVisible1"
    width="50%"
    :before-close="handleClose">
    <el-form ref="form1" :model="roleform" label-width="80px">
        <el-form-item label="角色名称" prop="roleName"
         :rules="[
              { required: true, message: '角色名称不能为空'},
            ]"
        >
            <el-input v-model="roleform.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc"
         :rules="[
              { required: true, message: '角色描述不能为空'},
            ]">
            <el-input v-model="roleform.roleDesc"></el-input>
        </el-form-item>
    </el-form>
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="submitForm1">确 定</el-button>
    </el-dialog>

  </div>
</template>

<script>
import {getroles,addroles,deleteroles,editroles,deleterightid,getroleall,addrole} from "network/juese.js"

export default {
  name:"power",
  data () {
    return {
        tableData:[],
        dialogVisible:false,
        dialogVisible1:false,
        roledialogVisible:false,
        roleform:{
            rolename:"",
            roleDesc:""
        },
        //角色 ID
        roleid:"",
        //分配角色
        treelist: [],
        defaultProps: {
          //表示以data中的children属性分级  label代表页面显示的文字
          children: 'children',
          label: 'authName'
        },
        //默认选中的权限数组
        arrcheck:[]
      }
    },
  created () {
      this.getroles()
  },
  methods: {
       //获取角色列表
     getroles(){
        getroles().then(res=>{
           this.tableData.push(...res.data.data)
       }) 
       },

     handleClose(done) {
            this.$confirm('确认关闭？')
            .then(_ => {
                done();
            })
            .catch(_ => {});
            this.treelist.length=0
      },

      //添加操作
      add(){
           this.dialogVisible=true
      },
      submitForm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            //当数据全部符合要求的时候 发送请求
            addroles(this.roleform).then(res=>{
                 console.log(222222222222)
            })
            // 完成后 跟新列表数据
            this.tableData.length=0
          
            for(let k in  this.roleform ){
                  this.roleform[k]=""
            }
            setTimeout(() => {
                this.getroles()
                console.log(1111111)
            }, 200);
          
            this.dialogVisible=false
            this.$message.success("添加成功")
          } else {
            this.$message.error('添加失败');
            return false;
          }
        });
      },

     //编辑操作
   editclick(id){
     this.dialogVisible1=true
     this.roleid=id
   },
   submitForm1(){
        this.$refs.form1.validate((valid) => {
          if (valid) {
            //当数据全部符合要求的时候 发送请求
            editroles(this.roleid,this.roleform).then(res=>{
                 console.log(res)
            })
            // 完成后 跟新列表数据
            this.tableData.length=0
          
            for(let k in  this.roleform ){
                  this.roleform[k]=""
            }
            setTimeout(() => {
               this.getroles()
            }, 500);
           
            this.dialogVisible1=false
            this.$message.success("修改成功")
          } else {
            this.$message.error('修改失败');
            return false;
          }
        });
   },

    //删除操作
    deleterole(id){
        deleteroles(id).then(res=>{
            if(res.data.meta.status==200){
                 //表示删除成功
                 this.$message.success("删除成功")
                 //并完成更新操作
                  this.tableData.length=0,
                  this.getroles()
            }else{
                //  失败
                this.$message.error('删除失败');
            }
     })
    },
    
    //删除展开项的权限:roleId 角色 ID :rightId 	权限 ID
   deletepower(rightId,role){
        deleterightid(rightId,role.id).then(res=>{
           if(res.data.meta.status==200){
                 //表示删除成功
                 this.$message.success("删除成功")
                 // 原理应该是 role 是对象，是引用类型数据，role反生改变，tabledata 数据就发生改变，vue 会重新渲染
                 //所以可以改变role 从而改变tabledata    
                 role.children=res.data.data
            }else{
                //  失败
                this.$message.error('删除失败');
            }       
          
        })
   },

  //  分配角色权限
  allotclick(rolearr){
    this.roleid=rolearr.id
      let arrtemp=[]
      getroleall().then(res=>{
        this.treelist=res.data.data
      })

      rolearr.children.forEach(item=>{
         item.children.forEach(item1=>{
           item1.children.forEach(item2=>{
               arrtemp.push(item1.id)
           })
         })
      })  
     //这是默认勾选的
      this.arrcheck=arrtemp

    //  利用递归获取本身有的权限
    // this.aaa(rolearr,this.defkey)
    this.roledialogVisible=true
    // console.log(rolearr)
    // console.log(this.defkey)
  },

  //递归函数
   aaa(node,arr){
      if(!node.children){
        return  arr.push(node.id)
      }
      node.children.filter(item => {
          this.aaa(item,arr)
      });
   },

  submitForm2(){
    // 获取勾选中的权限id
    const key1=this.$refs.tree.getCheckedKeys()
    // 获取半选中的节点所组成的数组	-
    const key2=this.$refs.tree.getHalfCheckedNodes()
    console.log( key1.join(","))
    //发送请求 添加勾选的权限
    addrole(this.roleid,key1.join(",")).then(res=>{
      console.log(res)
    })
    setTimeout(() => {
          //重新获取列表数据 发送了多个请求 延迟一个
          this.tableData.length=0
          this.getroles()
    }, 500);

    this.roledialogVisible=false
  },



  }
}

</script>
<style  scoped>
        .header{
            margin-bottom: 20px;
        }
        .rowborder{
           display: flex;
           align-items: center;
           border-bottom:1px solid gray;
           margin-bottom: 5px;
        }
</style>